<template>
  <el-card shadow="hover" style="margin: 20px;">
    <el-form :inline="true">
      <el-form-item>
        <el-input
        placeholder="角色名称"  
        size="mini"
        style="width: 250px;">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button 
        type="primary" 
        icon="el-icon-search"
        size="mini"
         >查询</el-button>
        <el-button size="mini">清空</el-button>
      </el-form-item>
    </el-form>
    <div style="margin:20px 0">
        <el-button 
        type="primary"  
        size="mini" >添加</el-button>
        <el-button 
        type="danger"
        size="mini"
          >批量删除</el-button>
    </div>
    <!--     @selection-change="handleSelectionChange" -->
    <el-table
    border
    stripe
    :data="list"
    >
        <el-table-column 
          type="selection"
          width="55"
          prop="daleted"
        />
        <el-table-column
            type="index"
            label="序号"
            width="80px"
            align="center"
          >
          </el-table-column>
          <el-table-column label="角色名称">
            <template v-slot="{ row }">
              <template v-if="row.edit">
                <el-input
                  v-model="row.roleName"
                  class="edit-input"
                  size="mini"
                />
                <el-button
                  class="el-icon-refresh "
                  size="mini"
                  type="warning"
                >
                  取消
                </el-button>
              </template>
              <span v-else>{{ row.roleName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300px" fixed="right">
            <template v-slot="{ row }">
              <el-button
                type="info"
                class="el-icon-info"
                size="small"
                title="分配权限"
              ></el-button>
              <el-button
                type="primary"
                class="el-icon-check"
                size="small"
                title="确定"
              ></el-button>
              <el-button
                type="primary"
                class="el-icon-edit-outline"
                size="small"
                title="修改角色"
              ></el-button>
              <el-button
                type="danger"
                class="el-icon-delete"
                size="small"
                title="删除角色"
              ></el-button>
            </template>
          </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 20px;">
        <el-pagination
          @size-change="getList"
          @current-change="getList"
          :current-page.sync="page"
          :page-sizes="[3, 6, 9]"
          :page-size.sync="limit"
          layout=" prev, pager, next, jumper,->,sizes,total"
          :total="total"
        >
        </el-pagination>
      </div>
  </el-card>
</template>

<script>
import {getRoleListApi} from "@/api/acl/role"
  export default {
    name:'Role',
    data(){
      return{
        roleName:'',
        list:[],
        page:1,
        limit:3,
        total:0
      }
    },
    methods: {
      // 渲染角色列表
      async getList(){
        const result = await getRoleListApi(this.page,this.limit)
        console.log('result',result);
        this.list = result.data.items.map(item=>{
          item.edit = false;//用于标识是否显示编辑输入框的属性
          return item;
        })
        this.total = result.data.total
      }
      
    },
    mounted() {
      this.getList()
    },
  }
</script>

<style lang="scss" scoped>
  
</style>